<!--
	This file is part of ELCube.
	ELCube is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.
	ELCube is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.
	You should have received a copy of the GNU Affero General Public License
	along with ELCube.  If not, see <https://www.gnu.org/licenses/>.
-->
<template>
    <nk-card>
        <a-switch slot="extra" size="small" v-if="def.allowViewSource && data.collected" v-model="showCode">显示代码</a-switch>

        <json-viewer
                v-if="showCode && data.collected"
                :value="data.collected"
                :expand-depth=5
                theme="jv-light"
                copyable
                boxed
                sort ></json-viewer>
        <template v-else-if="template">
            <component v-if="template" :is="template" :data="data.collected"></component>
        </template>
        <template v-else-if="data.collected instanceof Array">
            <vxe-grid  auto-resize resizable size="mini" border=inner :data="data.collected" :columns="columns"></vxe-grid>
        </template>
        <template v-else-if="data.collected instanceof Object">
            <nk-form :col="2">
                <nk-form-item v-for="key in keys" :key="key" :title="key">{{data.collected[key]}}</nk-form-item>
            </nk-form>
        </template>
    </nk-card>
</template>

<script>
    import Mixin from "Mixin";

    export default {
        mixins:[new Mixin()],
        data(){
            return {
                showCode:false,
                template: undefined
            }
        },
        computed:{
            columns(){
                return this.data.collected[0]&&Object.keys(this.data.collected[0])
                    .map(key=>{return {field:key,title:key}});
            },
            keys(){
                return Object.keys(this.data.collected);
            }
        },
        created() {
            if(this.def.vueTemplate){
                const t = [
                    `<template>`,
                    this.def.vueTemplate,
                    `</template>`,
                    `<script>`,
                    `export default {
                        props:{
                            data: {}
                        }
                    }`,
                    `<\/script>`,
                ];
                this.template = this.$sfc.compile("review",t.join('\n'));
            }
        },
        methods:{
        }
    }
</script>

<style scoped>

</style>